<template>
  <div class="index-class">
    <i class="el-icon-delete-solid"></i>
    <img :src="require('@/assets/'+logo+'.png')" alt="">
    Hello Vite Vue2 elementUI
    <img :src="url" alt="" style="width: 100%;height: 100%;background-color: blue"/>
    <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
    <div style="background-image: url(http://blog3.xzxsrq.top:9002/assets/img/img.2fdc87cc.png)">
      <el-button-group>
        <el-button icon="el-icon-minus" @click="decrease"></el-button>
        <el-button icon="el-icon-plus" @click="increase"></el-button>
      </el-button-group>
    </div>
    <el-input v-model.number="vModel.number"></el-input>
    <el-input v-model.trim="vModel.trim"></el-input>
    <el-input v-model.lazy="vModel.lazy"></el-input>
    <el-button @click="zhuangShiQi">装饰器</el-button>
  </div>
</template>

<script>
import debounceDecorator from "@localModules/ZhiXinLib/decorator/debounceDecorator";

export default {
  name: "IndexIndex",
  // 定义用到的组件
  components: {
  },
  // 自定义指令，这里定义局部指令
  directives: {},
  // 过滤器
  filters: {},
  // 定义用到的混入，可以重复使用代码
  mixins: [],
  // 属性定义使用对象的形式进行定义
  props: {indexProps: {type: String, default: 'indexProps'},},
  // 定义变量
  data() {
    return {
      show:true,
      url: '',
      webSocker:null,
      logo:'logo',
      percentage: 10,
      vModel:{
        number:'',
        trim:'',
        lazy: '',
      },
      colors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ]
    }
  },
  // 在页面创建完执行
  created() {
    // (resolve)=>require([path],resolve) ===> ()=>import()
    const test='options'
    const value2=require('@localModules/ZhiXinLib/config/'+test)
    console.log(value2);
    const onlySelf = require.context('@localModules/ZhiXinLib/element-components/dynamic-form', true, /(input.*).js$/)
    console.log(onlySelf);
    console.log(onlySelf.keys());
  },
  // 生命周期钩子函数end
  // 定义方法
  methods: {
    increase() {
      this.percentage += 10;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    },
    @debounceDecorator(400)
    zhuangShiQi(){
      this.$message.success('装饰器')
    }
  },
}
</script>
<style scoped lang="scss">
.index-class {
}
</style>
